/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import TabNavigator from 'react-native-tab-navigator';
import {
  StyleSheet,
  View
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'

import Home from './views/Home/Home.js'
import Me from './views/Me/Me.js'
import Search from './views/Search/Search.js'
import ShopCar from './views/ShopCar/ShopCar.js'

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      selectedTab:'Home'
    }
  }
  render() {
    return <View style={styles.container}>
      <TabNavigator>
        <TabNavigator.Item
          title='首页'
          selected={this.state.selectedTab==='Home'}
          titleStyle={{color:'gray'}}
          selectedTitleStyle={{color:'#7A16BD'}}
          renderIcon={()=><Icon name="home" size={25} color="gray" />}
          renderSelectedIcon = {()=><Icon name="home" size={25} color="#0079FF" />}
          tabStyle={{alignSelf:'center'}}
          onPress = {() => {this.setState({selectedTab:'Home'})}}
          key='home'
        >
          <Home></Home>
        </TabNavigator.Item>
        <TabNavigator.Item
          title='搜索'
          selected={this.state.selectedTab==='Search'}
          titleStyle={{color:'gray'}}
          selectedTitleStyle={{color:'#7A16BD'}}
          renderIcon={()=><Icon name="search" size={25} color="gray" />}
          renderSelectedIcon = {()=><Icon name="search" size={25} color="#0079FF" />}
          tabStyle={{alignSelf:'center'}}
          onPress = {() => {this.setState({selectedTab:'Search'})}}
          key='search'
        >
          <Search></Search>
        </TabNavigator.Item>
        <TabNavigator.Item
          title='购物车'
          selected={this.state.selectedTab==='ShopCar'}
          titleStyle={{color:'gray'}}
          selectedTitleStyle={{color:'#7A16BD'}}
          renderIcon={()=><Icon name="shopping-cart" size={25} color="gray" />}
          renderSelectedIcon = {()=><Icon name="shopping-cart" size={25} color="#0079FF" />}
          tabStyle={{alignSelf:'center'}}
          onPress = {() => {this.setState({selectedTab:'ShopCar'})}}
          key='shopcar'
        >
          <ShopCar></ShopCar>
        </TabNavigator.Item>
        <TabNavigator.Item
          title='个人'
          selected={this.state.selectedTab==='Me'}
          titleStyle={{color:'gray'}}
          selectedTitleStyle={{color:'#7A16BD'}}
          renderIcon={()=><Icon name="user" size={25} color="gray" />}
          renderSelectedIcon = {()=><Icon name="user-o" size={25} color="#0079FF" />}
          tabStyle={{alignSelf:'center'}}
          onPress = {() => {this.setState({selectedTab:'Me'})}}
          key='user'
        >
          <Me></Me>
        </TabNavigator.Item>
      </TabNavigator>
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});
